<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm1.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <div class="steps">
          <div class="steps_" :class="{ colorStyle1: show === 1 }">
            <div class="step-item">第一步：编辑课程信息</div>
          </div>
          <div class="steps_" :class="{ colorStyle2: show === 2 }">
            <div>
              <span class="circle"></span>
              <span class="circle" style="margin-left: 5px"></span>
            </div>
            <p class="step-item">第二步：选择课程内容</p>
          </div>
          <div class="steps_" :class="{ colorStyle3: show === 3 }">
            <div>
              <span class="circle"></span>
              <span class="circle" style="margin-left: 5px"></span>
            </div>
            <div class="step-item">第三步：设置课程规则</div>
          </div>
        </div>
        <el-form
          v-if="show === 1"
          ref="elForm1"
          :model="dataForm1"
          :rules="rules"
          size="medium"
          label-width="100px"
          label-position="right"
          :disabled="!!isDetail"
        >
          <el-col :span="13">
            <el-form-item label="课程分类" prop="crmclassification">
              <!-- <el-select
                v-model="dataForm1.crmclassification"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in getDict('kjfl')"
                  :key="index"
                  :label="item.dataName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select> -->
              <JADP-TreeSelect
                v-model="dataForm1.crmclassification"
                :options="treeData"
                placeholder="选择分类"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="13">
            <el-form-item label="课程名称" prop="crmname">
              <el-input
                v-model="dataForm1.crmname"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <!-- 
          <el-col :span="12">
            <el-form-item label="开始时间" prop="crmstarttime">
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->

          <el-col :span="13">
            <el-form-item label="学时" prop="hours">
              <el-input
                v-model="dataForm1.hours"
                placeholder="根据所选课件自动生成"
                readonly
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="13">
            <el-form-item label="主讲老师" prop="teacher">
              <el-input
                v-model="dataForm1.teacher"
                placeholder="根据课件讲师自动生成"
                readonly
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="13">
            <el-form-item label="课程评价" prop="pjmanagename">
              <el-input
                v-model="dataForm1.pjmanagename"
                placeholder="请选择"
                readonly
                :style="{ width: '100%' }"
                @click.native="
                  acquisitionEvaluation('59c767291601498b9b584a8fc09ab833')
                "
              >
                <template slot="append">
                  <el-button
                    type="primary"
                    @click="
                      acquisitionEvaluation('59c767291601498b9b584a8fc09ab833')
                    "
                    >选择课程评价</el-button
                  ></template
                >
              </el-input>
            </el-form-item>
          </el-col> -->

          <el-col :span="24">
            <el-form-item label="封面图片" prop="crmphoto">
              <JADP-UploadImg
                v-model="crmphotoList"
                :fileSize="2"
                sizeUnit="MB"
                :limit="1"
              >
              </JADP-UploadImg>
              <div>推荐图片尺寸3:2</div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="课程描述" prop="crmdescribe">
              <JADP-Quill
                style="height: 100px"
                v-model="dataForm1.crmdescribe"
                placeholder="请输入内容..."
              >
              </JADP-Quill>
            </el-form-item>
          </el-col>
        </el-form>
        <div v-if="show === 2">
          <el-collapse v-model="activeNames" accordion>
            <el-collapse-item
              v-for="(item, index) in list"
              :key="index"
              :name="index + 1"
            >
              <template slot="title">
                <div style="margin-left: 20px">{{ item.crmcatalogue }}</div>
                <!-- <el-input
                  @click.stop.native=""
                  @keyup.stop.native=""
                  autocomplete="off"
                  style="width: 300px; margin: 0 20px"
                  v-model="item.crmcatalogue"
                  disabled="false"
                ></el-input> -->
                <!-- <i
                  class="el-icon-delete-solid"
                  @click.stop="deleteStudy(index)"
                ></i> -->
              </template>
              <div>
                <el-button class="btn" @click="add(index, item.crmcatalogue)"
                  >添加课件</el-button
                >
                <el-table
                  :data="item.list"
                  border
                  v-if="item.list.length"
                  style="margin-top: 10px"
                >
                  <el-table-column
                    label="课件名称"
                    prop="crmcoursewarename"
                  ></el-table-column>

                  <el-table-column
                    prop="coursetype"
                    label="课件类型"
                    align="center"
                  >
                    <template #default="{ row }">
                      {{
                        row.coursetype
                          ? getDict("KeJianType", row.coursetype)
                          : ""
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="kjtime"
                    label="学习时长"
                    align="center"
                  >
                    <!-- <template v-slot="{ row }">
                      {{ row.fen ? row.fen + "分" + row.miao + "秒" : 0 }}
                    </template> -->
                  </el-table-column>
                  <el-table-column
                    prop="coursewaretime"
                    label="学时"
                    align="center"
                  />
                  <el-table-column
                    prop="teacher"
                    label="主讲老师"
                    align="center"
                  />

                  <el-table-column prop="sort" label="序号" align="center">
                    <template v-slot="{ row }">
                      <el-input-number
                        v-model="row.sort"
                        :min="0"
                        :step="1"
                        :max="100"
                        @change="changeSort(row.sort, row.id)"
                      ></el-input-number>
                    </template>
                  </el-table-column>

                  <!-- <el-table-column
                    label="评论次数"
                    prop="crmcomment"
                  ></el-table-column>
                  <el-table-column
                    label="评分"
                    prop="crmscore"
                  ></el-table-column>
                  <el-table-column label="排序">
                    <template #default="{ $index }">
                      <el-button type="text" @click="sort('up', $index)"
                        >上移</el-button
                      >
                      <el-button type="text" @click="sort('down', $index)"
                        >下移</el-button
                      >
                    </template>
                  </el-table-column> -->
                  <el-table-column label="操作" width="100">
                    <template #default="{ row, $index }">
                      <el-button
                        type="text"
                        class="JADP-table-delBtn"
                        @click="handleDel(row, $index, index)"
                        >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-empty
                  v-else
                  style="padding-bottom: 0"
                  description="暂无课件,请添加!"
                  :image-size="100"
                ></el-empty>
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-button
            class="btn1"
            type="button"
            icon="el-icon-plus"
            @click="addStudy"
            >添加目录</el-button
          >
        </div>
        <el-form
          v-if="show === 3"
          ref="elForm3"
          :model="dataForm3"
          :rules="rules"
          size="small"
          label-width="150px"
          label-position="right"
          :disabled="!!isDetail"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="禁止拖动视频进度" prop="crmvideo">
                <el-radio-group v-model="dataForm3.crmvideo" size="small">
                  <el-radio
                    v-for="(item, index) in getDict('sf')"
                    :key="index"
                    :label="item.id"
                    :disabled="item.disabled"
                  >
                    {{ item.dataName }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="禁止视频倍速播放" prop="crmaudiofrequency">
                <el-radio-group
                  v-model="dataForm3.crmaudiofrequency"
                  size="small"
                >
                  <el-radio
                    v-for="(item, index) in getDict('sf')"
                    :key="index"
                    :label="item.id"
                    :disabled="item.disabled"
                  >
                    {{ item.dataName }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <div
        style="width: 100%; height: 50px; padding-top: 5px; text-align: center"
      >
        <div class="foot">
          <el-button type="primary" @click="goBack">返回列表</el-button>

          <el-button
            type="primary"
            style="width: 105px"
            v-if="show != 3"
            @click="saveNext"
            >保存并下一步</el-button
          >
          <el-button type="primary" v-if="show !== 1" @click="show--"
            >上一步</el-button
          >
          <el-button
            type="primary"
            v-if="show == 1 && dataForm1.id"
            @click="show++"
            >下一步</el-button
          >
          <el-button type="primary" v-if="show == 3" @click="saveRelease"
            >保存并发布</el-button
          >
        </div>
      </div>
      <Courseware
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        :checkList="list[idx]"
        @Echo="Echo"
      />
      <!-- <EvaluationTable
        v-if="evaluationVisible"
        ref="EvaluationTable"
        @determine="determineCoursewareTable"
      /> -->
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import ExportBox from "./ExportBox";
import Courseware from "./Courseware";
// import EvaluationTable from "../xy_ks_courseware/evaluationTable";
export default {
  name: "ac",
  components: { ExportBox, Courseware },
  props: {
    premium: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      list: [],
      show: 1,
      dialogVisible: false,
      visible: false,
      isDetail: false,
      evaluationVisible: false,
      doubleClick: false,
      treeData: [],
      list: [],
      activeName: "",
      dataForm1: {
        crmclassification: "",
        crmname: undefined,
        crmstarttime: undefined,
        crmendtime: undefined,
        crmphoto: [],
        crmdescribe: undefined,
        creatoruserid: "",
        lastmodifyuserid: "",
        creatortime: "",
        lastmodifytime: "",
        pjmanageid: "",
        pjmanagename: "",
        hours: "",
        teacher: "",
        organizeId: "",
      },
      dataForm2: {
        crmscore: undefined,
        crmcoursewarename: undefined,
        crmcomment: undefined,
        creatoruserid: undefined,
        crmcatalogue: undefined,
        lastmodifyuserid: undefined,
        lastmodifytime: undefined,
        creatortime: 1651593600000,
        crmsort: undefined,
        crmid: undefined,
      },
      dataForm3: {
        crmnumberofstudents: undefined,
        crmcredit: undefined,
        crmhits: undefined,
        crmvideo: "f9223cd5333c4052a510f58fedebebe1",
        crmaudiofrequency: "f9223cd5333c4052a510f58fedebebe1",
        creatoruserid: undefined,
        lastmodifyuserid: undefined,
        creatortime: undefined,
        lastmodifytime: undefined,
        organizeId: "",
      },
      value1: "",
      rules: {
        crmphoto: [
          {
            required: true,
            message: "请选择封面图片",
          },
        ],
        crmclassification: [
          {
            required: true,
            message: "请选择课程分类",
            trigger: "change",
          },
        ],
        crmname: [
          {
            required: true,
            message: "请输入课程名称",
            trigger: "blur",
          },
        ],
        // hours: [
        //   {
        //     required: true,
        //     message: "请输入学时",
        //     trigger: "blur",
        //   },
        // ],
      },
      idx: "",
      crmcatalogue: "",
      activeNames: "",
      crmphotoList: [],
      crmphoto: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getTreeData();
  },
  mounted() {},
  methods: {
    getTreeData() {
      this.request({
        url: `api/xy_ks_course_type/Xy_ks_course_type/getTreeList?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      }).then((res) => {
        let topItem = {
          fullName: "默认",
          hasChildren: true,
          id: "-1",
          icon: "icon-ym icon-ym-tree-organization3",
          children: res.data,
        };
        this.treeData = [topItem];
        console.log(this.treeData, "treedata");
      });
    },
    // 回显并直接保存
    Echo(val) {
      console.log(val, "val");
      let data = val.map((item) => ({
        courseid: this.dataForm1.id,
        crmcatalogue: this.crmcatalogue,
        crmcoursewarename: item.name,
        crmid: item.id,
        organizeId:this.$store.getters.organizeId
      }));

      // data.forEach(item => this.list[this.idx].list.push(item));
      // console.log(data);
      request({
        url: "/api/courseware/Xy_ks_urriculum_second",
        method: "post",
        data: { list: data,},
      }).then((res) => {
        this.$message({
          message: res.msg,
          type: "success",
          duration: 1000,
          onClose: () => {},
        });
        this.init(this.dataForm1.id);
      });
    },
    handleDel(row, idx, index) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          request({
            url: `/api/courseware/Xy_ks_urriculum_second/${row.id}`,
            method: "DELETE",
          }).then((res) => {
            this.list[index].list.splice(idx, 1);
            this.$message({
              type: "success",
              message: res.msg,
            });
          });
        })
        .catch(() => {});
    },
    deleteStudy(index) {
      this.list.splice(index, 1);
    },
    add(idx, val) {
      this.idx = idx;
      this.crmcatalogue = val;
      this.dialogVisible = true;
    },
    sort(dir, idx) {
      if (dir == "up") {
        return;
      }
    },
    addStudy() {
      this.list.push({
        crmcatalogue: "目录" + (this.list.length + 1),
        list: [],
      });
      this.activeNames = this.list.length;
    },
    saveNext() {
      if (this.show == 1) {
        this.$set(
          this.dataForm1,
          "crmphoto",
          this.crmphotoList.length ? JSON.stringify(this.crmphotoList) : ""
        );

        this.$refs["elForm1"].validate((valid) => {
          this.dataForm1.organizeId = this.$store.getters.organizeId;

          if (valid) {
            this.dataForm1.crmstarttime = this.value1[0];
            this.dataForm1.crmendtime = this.value1[1];
            if (this.premium) {
              this.dataForm1.premium = 1;
            }
            if (!this.dataForm1.id) {
              request({
                url: `/api/courseinformation/Xy_ks_curriculum_first`,
                method: "post",
                data: this.dataForm1,
              }).then((res) => {
                this.dataForm1.id = res.data;
                this.$message({
                  message: res.msg,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.show = 2;
                  },
                });
              });
            } else {
              request({
                url:
                  "/api/courseinformation/Xy_ks_curriculum_first/" +
                  this.dataForm1.id,
                method: "PUT",
                data: this.dataForm1,
              }).then((res) => {
                this.$message({
                  message: res.msg,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.show = 2;
                  },
                });
              });
            }
          }
        });
      } else if (this.show == 2) return this.show++;
    },
    saveRelease() {
      if (!this.dataForm3.id) {
        request({
          url: `/api/coursemanagement/Xy_ks_curriculum_third`,
          method: "post",
          data: {
            ...this.dataForm3,
            crmid: this.dataForm1.id,
            premium: this.premium ? 1 : 0,
            organizeId:this.$store.getters.organizeId
          },
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.goBack();
            },
          });
        });
      } else {
        request({
          url:
            "/api/coursemanagement/Xy_ks_curriculum_third/" + this.dataForm1.id,
          method: "PUT",
          data: this.dataForm3,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.goBack();
            },
          });
        });
      }
    },
    changeSort(sort, id) {
      request({
        url: `/api/courseware/Xy_ks_urriculum_second/updateSort/${id}`,
        method: "put",
        data: { sort: sort },
      }).then((res) => {
        this.$message({
          message: res.msg,
          type: "success",
          duration: 1000,
        });
        this.init(this.dataForm1.id);
      });
    },
    goBack() {
      this.$emit("refresh", true);
    },
    init(id, isDetail, bool) {
      this.crmphotoList = [];
      this.dataForm1.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(async () => {
        // this.$refs["elForm1"].resetFields();
        if (this.dataForm1.id) {
          let first = await request({
            url:
              "/api/courseinformation/Xy_ks_curriculum_first/" +
              this.dataForm1.id +
              "?organizeId=" +
              this.$store.getters.organizeId,
            method: "get",
          });
          this.dataForm1 = first.data;
          this.value1 = [
            this.dataForm1.crmstarttime,
            this.dataForm1.crmendtime,
          ];
          this.crmphotoList = this.dataForm1.crmphoto
            ? JSON.parse(this.dataForm1.crmphoto)
            : [];

          bool && (this.show = 2);
          let second = await request({
            url: "/api/courseware/Xy_ks_urriculum_second",
            method: "get",
            data: {
              courseId: this.dataForm1.id,
              organizeId: this.$store.getters.organizeId,
            },
          });
          this.list = second.data;
          console.log(this.list, 1111);
          let third = await request({
            url:
              "/api/coursemanagement/Xy_ks_curriculum_third/" +
              this.dataForm1.id,
            method: "get",
          });
          this.dataForm3 = third.data;
          console.log(this.dataForm3, 2222);
        }
      });
    },
    // 表单提交
    dataForm1Submit() {},
    //获取评价
    acquisitionEvaluation(id) {
      this.evaluationVisible = true;
      this.$nextTick(() => {
        this.$refs.EvaluationTable.initData(id);
      });
    },
    determineCoursewareTable(val, dict) {
      if (dict == "课程") {
        this.dataForm1.pjmanagename = val.managename;
        this.dataForm1.pjmanageid = val.id;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
  background-color: #f5f7fa;
}
.steps {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 22px;
  .steps_ {
    height: 40px;
    line-height: 40px;
    .circle {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      background: rgb(245, 247, 250);
    }
    width: 30%;
    display: flex;
    .step-item {
      // -webkit-box-flex: 1;
      // flex: 1;
      width: 100%;
      //   background: rgb(64, 158, 255);
      background: rgb(245, 247, 250);
      text-align: center;
      position: relative;
      -webkit-clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 50%,
        calc(100% - 20px) 100%,
        0 100%,
        20px 50%,
        0 0
      );
      &:nth-child(n + 2) {
        width: 92%;
        // &::before {
        //   content: "嘻嘻";
        //   width: 20px;
        //   height: 20px;
        //   position: relative;
        //   left: -40px;
        //   z-index: 1000000;
        //   color: green;
        //   top: 0;
        // }
      }
    }
  }
}
.colorStyle1,
.colorStyle2,
.colorStyle3 {
  .step-item {
    background: rgb(64, 158, 255) !important;
  }

  span {
    background: rgb(64, 158, 255) !important;
  }
  p {
    color: #fff;
  }
}
.foot {
  width: 380px;
  height: 35px;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  // ::v-deep .el-button {
  //   margin-right: 30px;
  // }
}
.btn,
.btn1 {
  width: 150px;
  height: 40px;
  color: #409eff;
  margin: 20px 0 0 20px;
  border-radius: 6px;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    color: #fff;
    background: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
}
.btn {
  width: 80px;
}
</style>
